<template>
  <div>count: {{ count }}</div>
  <div>double: {{ double }}</div>
  <div>
    <button @click="increment">increment</button>
    <button @click="decrement">decrement</button>
    <button @click="multify">multify</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/store/counter'
import { computed } from 'vue'
const counterStore = useCounterStore()
const count = computed(() => counterStore.count)
const double = computed(() => counterStore.double)
const increment = () => counterStore.increment()
const decrement = () => counterStore.decrement()
const multify = () => counterStore.$patch(state => state.count = state.count * 2)
</script>

<style scoped>
</style>